<template>
	<view class="relation-select">
		<u-field
			:disabled="true"
			:label="label"
			:placeholder="placeholder"
			:required="required"
			:value="selectValue"
			:right-icon="disabled ? '' : 'arrow-right'"
			:error-message="errorMessage"
			@click="showSelectDlg = !disabled"
		/>
		<u-popup
			v-if="showSelectDlg"
			v-model="showSelectDlg"
			mode="left"
			length="100%"
		>
			<online-form :formId="props.relativeFormId" @close="onCloseSelectForm" />
		</u-popup>
	</view>
</template>

<script>
	import { validateWidget } from '@/utils/validate.js';
	export default {
		name: 'relationSelect',
		props: {
			label: {
				type: String,
				default: '关联选择'
			},
			value: {
				type: [String, Number, Array]
			},
			required: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			rules: {
				type: Array
			},
			placeholder: {
				type: String
			},
			multiple: {
				type: Boolean,
				default: false
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'name',
						value: 'id',
						relativeFormId: undefined,
						datasourceId: undefined,
						relationId: undefined,
						variableName: undefined,
						relationTableName: undefined,
						relationColumnName: undefined
					}
				}
			}
		},
		data() {
			return {
				showSelectDlg: false,
				selectedItems: [],
				errorMessage: ''
			}
		},
		methods: {
			onChange(selectItem) {
				let val;
				if (Array.isArray(selectItem) && selectItem.length > 0) {
					val = selectItem.map(item => item[this.props.relationColumnName]);
				}
				if (!this.multiple) val = val[0];
				this.$emit('input', val);
				this.$emit('change', val)
			},
			onCloseSelectForm(refresh, selectItem) {
				this.showSelectDlg = false;
				if (refresh) {
					this.onChange(selectItem);
					this.selectedItems = selectItem;
				}
			},
			getSelectItemList() {
				const that = this
				if (this.value == null || this.value === '') {
					this.selectedItems = [];
					return;
				}
				let params = {};
				params.datasourceId = this.props.datasourceId;
				params.filterDtoList = [];
				params.filterDtoList.push({
					columnName: this.props.relationColumnName,
					columnValue: this.value,
					filterType: 1,
					tableName: this.props.relationTableName
				});
				params.relationId = this.props.relationId;
				this.doUrl(`/admin/online/onlineOperation/listByOneToManyRelationId/${this.props.variableName}`, 'post', params).then(res => {
					that.selectedItems = Array.isArray(res.dataList) ? res.dataList : [];
				}).catch(e => {
					that.selectedItems = [];
				});
			},
			validateWidget() {
				return new Promise((resolve, reject) => {
					validateWidget(this.rules, this.value).then(res => {
						this.errorMessage = '';
						resolve();
					}).catch(e => {
						this.errorMessage = e;
						resolve(e)
					});
				});
			}
		},
		computed: {
			selectValue() {
				let labelList = (this.selectedItems || []).map(item => item[this.props.displayField]);
				return labelList.length > 0 ? labelList.join(', ') : undefined;
			}
		},
		watch: {
			value: {
				handler() {
					this.getSelectItemList();
				},
				immediate: true
			}
		},
		mounted() {}
	}
</script>

<style>
</style>